<template>
  <div class="content">
    <div class="block navigation-block">
      <div class="btn-block">
        <div class="btn3 btn-item" @click="reviewResume">预览简历</div>
        <div class="btn2 btn-item">简历优化</div>
      </div>
    </div>
    <div class="block resume-block">
      <div class="resume-item personal-information" v-loading="informationLoading" @click="dialogVisible[0]=true">
        <img :src="information.faceUrl" alt="" class="user-photo" v-show="information.faceUrl">
        <div class="info-block">
          <div class="name-block">
            <div class="name">{{ information.realName }}</div>
            <div class="name" style="color: #8c939d;font-size:14px;">{{ user.jobStatusText }}</div>
            <div class="edit">编辑</div>
          </div>
          <div class="other">{{ information.workTime }}{{
              information.birthday ? '·' + information.birthday : ''
            }}{{ information.education ? '·' + information.education : '' }}
          </div>
        </div>
      </div>
      <div class="resume-item objective" v-loading="intentionLoading">
        <div class="resume-title-block">
          <div class="resume-title">求职意向</div>
          <div @click="editItem(1)" class="iconfont">+</div>
        </div>
        <template v-if="intention.length>0">
          <div class="resume-content-block" v-for="(item) in intention" :key="item.id">
            <div class="objective-item" @click="editItem(1,item.id)">
              <div class="position">{{ item.postName }}</div>
              <div class="other">{{ item.salaryMin }}元 - {{ item.salaryMax }}元&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;{{
                  item.regCity
                }}·{{
                  item.regArea
                }}&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;{{ item.recruitType === 1 ? '全职' : '兼职' }}
              </div>
            </div>
            <div @click="deleteRow(1,item.id)" class="iconfont" style="margin-right: 3px">-</div>
          </div>
        </template>
        <el-empty v-else ></el-empty>
      </div>
      <div class="resume-item work-experience" v-loading="workExperienceLoading">
        <div class="resume-title-block">
          <div class="resume-title">工作经历</div>
          <div @click="editItem(2)" class="iconfont">+</div>
        </div>
        <template v-if="workExperience.length>0">
          <div class="resume-content-block" v-for="(item) in workExperience" :key="item.id">
            <div class="experience-item" @click="editItem(2,item.id)">
              <div class="company-name-block">
                <div class="company-name">{{ item.companyName }}</div>
                <div class="time-quantum">{{ item.workTimeStart }}&nbsp;至&nbsp;{{ item.workTimeEnd }}</div>
              </div>
              <div class="position">{{ item.postName }}·{{ item.industryText }}</div>
              <div class="describe">{{ item.workExplain }}</div>
            </div>
            <div @click.stop="deleteRow(2,item.id)" class="iconfont" style="margin-right: 3px">-</div>
          </div>
        </template>
        <el-empty v-else ></el-empty>
      </div>
      <div class="resume-item project-experience" v-loading="projectExperienceLoading">
        <div class="resume-title-block">
          <div class="resume-title">项目经历</div>
          <div @click="editItem(3)" class="iconfont">+</div>
        </div>
        <template v-if="projectExperience.length>0">
          <div class="resume-content-block" v-for="(item) in projectExperience" :key="item.id">
            <div class="experience-item" @click="editItem(3,item.id)">
              <div class="company-name-block">
                <div class="item-name">{{ item.itemName }}</div>
                <div class="company-name" style="margin-left: 10px">{{ item.companyName }}</div>
                <div class="time-quantum">{{ item.startTime }}&nbsp;至&nbsp;{{ item.endTime }}</div>
              </div>
              <div class="describe">{{ item.itemContent }}</div>
            </div>
            <div @click="deleteRow(3,item.id)" class="iconfont" style="margin-right: 3px">-</div>
          </div>
        </template>
        <el-empty v-else ></el-empty>
      </div>
      <div class="resume-item education" v-loading="educationLoading">
        <div class="resume-title-block">
          <div class="resume-title">教育经历</div>
          <div @click="editItem(4)" class="iconfont">+</div>
        </div>
        <template v-if="education.length>0">
          <div class="resume-content-block" v-for="(item) in education" :key="item.id">
            <div class="education-item" @click="editItem(4,item.id)">
              <div class="info-block">
                <div class="name-block">
                  <div class="name">{{ item.schoolName }}</div>
                  <div class="time-quantum">{{ item.startTime }} 至 {{ item.endTime }}</div>
                </div>
                <div class="faculty">{{ item.educationText }} | {{ item.major }}</div>
              </div>
            </div>
            <div @click="deleteRow(4,item.id)" class="iconfont" style="margin-right: 3px">-</div>
          </div>
        </template>
        <el-empty v-else ></el-empty>
      </div>
      <div class="resume-item language" v-loading="languageLoading">
        <div class="resume-title-block">
          <div class="resume-title">语言能力</div>
          <div @click="editItem(5)" class="iconfont">+</div>
        </div>
        <template v-if="language.length>0">
          <div class="resume-content-block" v-for="(item) in language" :key="item.id">
            <div class="language-item" @click="editItem(5,item.id)">
              <div class="name">{{ item.languagesText }}</div>
              <div class="capacity">{{ item.cert }}</div>&nbsp;&nbsp;|&nbsp;&nbsp;
              <div class="level">{{ item.redAndWrtText }}</div>
            </div>
            <div @click="deleteRow(5,item.id)" class="iconfont" style="margin-right: 3px">-</div>
          </div>
        </template>
        <el-empty v-else ></el-empty>
      </div>
      <div class="resume-item other" v-loading="additionLoading">
        <div class="resume-title-block">
          <div class="resume-title">优势亮点<span class="resume-title-tips"><i class="el-icon-question"></i>说说自己的优点，形容一下自己。</span></div>
          <div @click="editItem(6,1)" class="edit">编辑</div>
        </div>
        <div @click="editItem(6,1)" class="other-item">
          <div class="resume-content-block" style="white-space: pre-wrap;">{{ addition }}</div>
        </div>
      </div>
    </div>
    <div class="block menu-block">
      <div class="menu-block-item to-be-perfect">
        <div class="title-block">
          <div class="title">简历待完善项
            <div class="iconfont icon-gantanhao"></div>
          </div>
          <div class="describe">完善后获得更强竞争力</div>
        </div>
        <div class="supplement-item">
          <div class="info-block">
            <div class="supplement-title-block">
              <div class="point"></div>
              <div class="title">基本信息</div>
            </div>
<!--            <div class="supplement-content">必填字段缺失 · <span class="unit">1项</span></div>-->
          </div>
<!--          <div class="supplement-btn">去补充-->
<!--            <div class="iconfont icon-xuanzeqixiayige_o"></div>-->
<!--          </div>-->
        </div>
      </div>
      <div class="menu-block-item integrity">
        <div class="title-block">
          <div class="title">简历完整度</div>
        </div>
        <div class="progress-bar-block">
          <el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
        </div>
        <div class="describe">持续优化简历，获更强职场竞争力</div>
      </div>

    </div>
    <!--弹窗-->
    <el-dialog title="编辑个人信息" v-if="dialogVisible[0]" :visible.sync="dialogVisible[0]" width="40%"
               :close-on-click-modal="false" :close-on-press-escape="false" top="5vh" :destroy-on-close="true">
      <PersonalInfo ref="personalInfo" @refresh="refresh"></PersonalInfo>
      <span slot="footer" class="dialog-footer">
        <el-button plain type="primary" @click="dialogVisible[0] = false">取 消</el-button>
        <el-button type="primary" class="primary" @click="$refs.personalInfo.submit()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="求职意向" v-if="dialogVisible[1]" :visible.sync="dialogVisible[1]" width="40%"
               :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" top="5vh">
      <Objective ref="dialog-1" @refresh="refresh"></Objective>
      <span slot="footer" class="dialog-footer">
        <el-button plain type="primary" @click="dialogVisible[1] = false">取 消</el-button>
        <el-button type="primary" class="primary" @click="$refs['dialog-1'].submit()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="工作经历" v-if="dialogVisible[2]" :visible.sync="dialogVisible[2]" width="40%"
               :close-on-click-modal="false" :close-on-press-escape="false" top="5vh" :destroy-on-close="true">
      <WorkExperience ref="dialog-2" @refresh="refresh"></WorkExperience>
      <span slot="footer" class="dialog-footer">
        <el-button plain type="primary" @click="dialogVisible[2] = false">取 消</el-button>
        <el-button type="primary" class="primary" @click="$refs['dialog-2'].submit()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="项目经历" v-if="dialogVisible[3]" :visible.sync="dialogVisible[3]" width="40%"
               :close-on-click-modal="false" top="5vh" :close-on-press-escape="false" :destroy-on-close="true">
      <ProjectExperience ref="dialog-3" @refresh="refresh"></ProjectExperience>
      <span slot="footer" class="dialog-footer">
            <el-button plain type="primary" @click="dialogVisible[3] = false">取 消</el-button>
            <el-button type="primary" class="primary"
                       @click="$refs['dialog-3'].submit()">确 定</el-button>
          </span>
    </el-dialog>

    <el-dialog title="教育经历" v-if="dialogVisible[4]" :visible.sync="dialogVisible[4]" width="40%"
               :close-on-click-modal="false" :close-on-press-escape="false" top="5vh" :destroy-on-close="true">
      <Education ref="dialog-4" @refresh="refresh"></Education>
      <span slot="footer" class="dialog-footer">
            <el-button plain type="primary" @click="dialogVisible[4] = false">取 消</el-button>
            <el-button type="primary" class="primary" @click="$refs['dialog-4'].submit()">确 定</el-button>
          </span>
    </el-dialog>

    <el-dialog title="语言能力" v-if="dialogVisible[5]" :visible.sync="dialogVisible[5]" width="40%"
               :close-on-click-modal="false" :close-on-press-escape="false" top="5vh"  :destroy-on-close="true">
      <Language ref="dialog-5" @refresh="refresh"></Language>
      <span slot="footer" class="dialog-footer">
            <el-button plain type="primary" @click="dialogVisible[5] = false">取 消</el-button>
            <el-button type="primary" class="primary" @click="$refs['dialog-5'].submit()">确 定</el-button>
          </span>
    </el-dialog>

    <el-dialog title="附加信息" v-if="dialogVisible[6]" :visible.sync="dialogVisible[6]" width="40%" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" top="5vh" >
      <Other ref="dialog-6" @refresh="refresh"></Other>
      <span slot="footer" class="dialog-footer">
            <el-button plain type="primary" @click="dialogVisible[6] = false">取 消</el-button>
            <el-button type="primary" class="primary" @click="$refs['dialog-6'].submit()">确 定</el-button>
          </span>
    </el-dialog>
    <CoverLoading v-if="coverLoading" type="0"></CoverLoading>
  </div>
</template>

<script>
import PersonalInfo from "@/components/MineCenter/Candidate/Dialog/PersonalInfo";
import Objective from "@/components/MineCenter/Candidate/Dialog/Objective";
import WorkExperience from "@/components/MineCenter/Candidate/Dialog/WorkExperience";
import Language from "@/components/MineCenter/Candidate/Dialog/Language";
import ProjectExperience from "@/components/MineCenter/Candidate/Dialog/ProjectExperience";
import Education from "@/components/MineCenter/Candidate/Dialog/Education";
import Other from "@/components/MineCenter/Candidate/Dialog/Other";
import CoverLoading from '@/components/CoverLoading/CoverLoading';
import {
  delEducation,
  delIntention, delLanguage, delProjectExp, delWorkExp, getAddition as getAdditionApi, getEducationList,
  getInformation as getInformationApi,
  getIntentionList as getIntentionListApi, getLanguageList, getProjectExpList, getResumePdf,
  getWorkExpList as getWorkExpListApi
} from "@/api/mineCenter";
import {mapGetters} from "vuex";

export default {
  name: "Resume",
  components: {
    PersonalInfo,
    Objective,
    WorkExperience,
    Language,
    ProjectExperience,
    Education,
    Other,
    CoverLoading
  },
  data() {
    return {
      coverLoading:false,
      percentage:0,
      customColor: '#409eff',
      customColors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ],
      //个人信息
      informationLoading: false,
      information: {
        workTime: '暂无',
        birthday: '暂无',
        education: '暂无',
        faceUrl: '',
        realName: '',
      },
      intentionLoading: false,
      intention: [],
      workExperienceLoading: false,
      workExperience: [],

      projectExperienceLoading: false,
      projectExperience: [],

      educationLoading: false,
      education: [],

      languageLoading: false,
      language: [],

      additionLoading: false,
      addition: '',
      dialogVisible: {
        0: false,
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false,
      }
    }
  },
  methods: {
    //保存后刷新信息，关闭弹窗
    refresh(type) {
      switch (type) {
        case 0:
          this.getInformation();
          break
        case 1:
          this.getIntention();
          break;
        case 2:
          this.getWorkExp();
          break;
        case 3:
          this.getProjectExp();
          break;
        case 4:
          this.getEducation();
          break;
        case 5:
          this.getLanguage();
          break;
        case 6:
          this.getAddition();
          break;
      }
      this.$store.dispatch('user/getUser');
      this.dialogVisible[type] = false;
    },
    //公用打开弹窗
    editItem(type, id = null) {
      this.dialogVisible[type] = true;
      if (id) {
        this.$nextTick(() => {
          this.$refs[`dialog-${type}`].getDetail(id);
        })
      }
    },
    calcPercentage(){
      this.percentage = 0;
      if(Object.keys(this.intention).length>0)
      {
        this.percentage += 20
      }
      if(Object.keys(this.workExperience).length>0)
      {
        this.percentage += 20
      }
      if(Object.keys(this.projectExperience).length>0)
      {
        this.percentage += 20
      }
      if(Object.keys(this.education).length>0)
      {
        this.percentage += 20
      }
      if(Object.keys(this.language).length>0)
      {
        this.percentage += 10
      }
      if(Object.keys(this.addition).length>0)
      {
        this.percentage += 10
      }
    },
    //公用删除
    deleteRow(type, id) {
      this.$confirm('确定删除该数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let promise = null;
        const loading = this.$loading({text: '删除中'});
        switch (type) {
          case 1:
            promise = delIntention({id});
            break;
          case 2:
            promise = delWorkExp({id});
            break;
          case 3:
            promise = delProjectExp({id});
            break;
          case 4:
            promise = delEducation({id});
            break;
          case 5:
            promise = delLanguage({id});
            break;
        }
        promise.then(() => {
          this.$message.success('删除成功');
          this.refresh(type);
        }).finally(() => {
          loading.close();
        })
      })
    },
    //预览简历
    reviewResume() {
      this.coverLoading=true
      getResumePdf({}).then((res)=>{
        setTimeout(()=>{
          this.coverLoading=false
          window.open(res)
        },2000)
      }).catch(()=>{
        this.coverLoading=false
      })
    },
    //获取个人信息
    getInformation() {
      this.informationLoading = true
      getInformationApi({}).then((res) => {
        this.information = res;

      }).finally(() => {
        this.informationLoading = false
      })
    },
    //获取求职意向
    getIntention() {
      this.intentionLoading = true
      getIntentionListApi({}).then((res) => {
        this.intention = res ?? [];
        this.calcPercentage();
      }).finally(() => {
        this.intentionLoading = false
      })
    },
    //获取工作经历
    getWorkExp() {
      this.workExperienceLoading = true
      getWorkExpListApi({}).then((res) => {
        this.workExperience = res ?? [];
        this.calcPercentage();
      }).finally(() => {
        this.workExperienceLoading = false
      })
    },
    //获取项目经历
    getProjectExp() {
      this.projectExperienceLoading = true
      getProjectExpList({}).then((res) => {
        this.projectExperience = res ?? [];
        this.calcPercentage();
      }).finally(() => {
        this.projectExperienceLoading = false
      })
    },
    //获取教育经历
    getEducation() {
      this.educationLoading = true
      getEducationList({}).then((res) => {
        this.education = res ?? [];
        this.calcPercentage();

      }).finally(() => {
        this.educationLoading = false
      })
    },
    //获取语言能力
    getLanguage() {
      this.educationLoading = true
      getLanguageList({}).then((res) => {
        this.language = res ?? [];
        this.calcPercentage();

      }).finally(() => {
        this.educationLoading = false
      })
    },
    //获取附加信息
    getAddition() {
      this.additionLoading = true
      getAdditionApi({}).then((res) => {
        this.addition = res?.data ?? '';
        this.calcPercentage();

      }).finally(() => {
        this.additionLoading = false
      })
    },
    customColorMethod(percentage) {
      if (percentage < 30) {
        return '#909399';
      } else if (percentage < 70) {
        return '#e6a23c';
      } else {
        return '#67c23a';
      }
    },
  },
  mounted() {
    this.getInformation();
    this.getIntention();
    this.getWorkExp();
    this.getProjectExp();
    this.getEducation();
    this.getLanguage();
    this.getAddition();
  },
  computed: {
    ...mapGetters(['user'])
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: $contentWidth;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .block {
    display: flex;
  }

  .block.navigation-block {
    width: 100%;
    flex-direction: row;
    align-items: center;
    padding: 5px 0;

    .navigation {
      flex-grow: 1;
    }

    .btn-block {
      flex-grow: 0;
      display: flex;
      flex-direction: row;

      .btn-item {
        width: 95px;
        height: 32px;
        font-size: 14px;
        margin-left: 12px;
      }
    }
  }

  .block.resume-block {
    flex-direction: column;
    width: 600px;
    margin-right: 16px;

    .resume-item {
      width: 100%;
      background: #fff;
      box-shadow: 0 0 10px 0 #efefef;
      border-radius: 5px;
      margin-bottom: 16px;
      padding: 20px;
      display: flex;
      flex-direction: column;

      .resume-content-block {
        display: flex;
        flex-direction: row;
        margin-top: 15px;
        cursor: pointer;
        justify-content: space-between;
      }

      .other-item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }

      //.btn2.btn-item{
      //  width: 40px;
      //  font-size: 8px;
      //  height: 20px;
      //  margin-top: 5px;
      //}
      .iconfont {
        display: flex;
        //align-items: end;
        align-items: center;
        justify-content: center;
        flex-grow: 0;
        cursor: pointer;
        background: #e4e4e4;
        color: $orange;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        font-size: 20px;
      }

      .resume-title-block {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 16px;

        .resume-title {
          font-size: 18px;
          font-weight: bold;
          flex-grow: 1;
          .resume-title-tips{
            margin-left: 20px;
            font-size: 12px;
            color: #7a7777;
          }
        }

        .iconfont {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-grow: 0;
          cursor: pointer;
          background: #FFEEE4;
          color: $orange;
          border-radius: 50%;
          width: 30px;
          height: 30px;
          font-size: 25px;
          padding-left: 2px;
          padding-bottom: 2px;
        }

        .edit {
          color: $orange;
          font-size: 14px;
          cursor: pointer;
        }
      }
    }

    .resume-item.personal-information {
      display: flex;
      flex-direction: row;
      align-items: center;

      .user-photo {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        margin-right: 16px;
      }

      .info-block {
        width: calc(100% - 85px);
        display: flex;
        flex-direction: column;
        justify-content: center;

        .name-block {
          display: flex;
          flex-direction: row;
          align-items: center;

          .name {
            font-weight: bold;
            font-size: 20px;
            flex-grow: 1;
          }

          .edit {
            color: $orange;
            font-size: 14px;
            flex-grow: 0;
            cursor: pointer;
          }
        }

        .other {
          margin-top: 14px;
        }
      }
    }

    .resume-item.objective {
      .resume-content-block {
        .objective-item {
          display: flex;
          flex-direction: row;
          font-size: 14px;

          .position {
            font-weight: bold;
            margin-right: 16px;
          }
        }
      }
    }

    .resume-item.work-experience, .resume-item.project-experience {
      .resume-content-block {
        .experience-item {
          display: flex;
          flex-direction: column;
          width: 90%;

          .company-name-block {
            display: flex;
            flex-direction: row;
            font-size: 14px;

            .company-name {
              font-weight: bold;
              margin-right: 16px;
            }

            .time-quantum {
              color: $darkGray;
            }
          }

          .describe, .position {
            font-size: 14px;
            margin-top: 10px;
          }
        }
      }
    }

    .resume-item.education {
      .resume-content-block {
        .education-item {
          display: flex;
          flex-direction: row;
          align-items: center;

          .logo {
            width: 50px;
            height: 50px;
            border-radius: 5px;
          }

          .info-block {
            width: 100%;
            display: flex;
            flex-direction: column;

            .name-block {
              display: flex;
              flex-direction: row;
              align-items: center;

              .name {
                font-size: 14px;
                font-weight: bold;
                margin-right: 10px;
              }

              .time-quantum {
                font-size: 12px;
                color: $darkGray;
              }
            }

            .faculty {
              color: $darkGray;
              font-size: 14px;
              margin-top: 14px;
            }
          }
        }
      }
    }

    .resume-item.language {
      .resume-content-block {
        .language-item {
          display: flex;
          flex-direction: row;
          font-size: 14px;

          .name {
            font-weight: bold;
            margin-right: 10px;
          }
        }
      }
    }
  }

  .block.menu-block {
    width: calc(100% - 866px);
    display: flex;
    flex-direction: column;

    .menu-block-item {
      width: 100%;
      padding: 30px;
      background: #fff;
      box-shadow: 0 0 10px 0 #efefef;
      border-radius: 5px;
      margin-bottom: 16px;
      display: flex;
      flex-direction: column;

      .title-block {
        display: flex;
        flex-direction: column;

        .title {
          font-size: 18px;
          display: flex;
          flex-direction: row;
          align-items: center;
          font-weight: bold;

          .iconfont {
            margin-left: 10px;
            color: $orange;
            font-weight: normal;
          }
        }

        .describe {
          font-size: 14px;
          margin-top: 6px;
        }
      }
    }

    .menu-block-item.to-be-perfect {
      .supplement-item {
        display: flex;
        flex-direction: row;
        margin-top: 16px;

        .info-block {
          flex-grow: 1;
          display: flex;
          flex-direction: column;

          .supplement-title-block {
            display: flex;
            flex-direction: row;
            align-items: center;

            .point {
              width: 7px;
              height: 7px;
              background: $orange;
              border-radius: 50%;
              margin-right: 5px;
            }

            .title {
              font-weight: bold;
            }
          }

          .supplement-content {
            font-size: 14px;
            margin-top: 10px;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding-left: 10px;

            .unit {
              color: $orange;
            }
          }
        }

        .supplement-btn {
          flex-grow: 0;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          color: $orange;
          font-size: 14px;

          .iconfont {
            color: $darkGray;
            margin-left: 5px;
          }
        }
      }
    }

    .menu-block-item.integrity {
      .progress-bar-block {

        margin-top: 16px;


      }

      .describe {
        margin-top: 16px;
        font-size: 14px;
      }
    }

    .menu-block-item.privacy {
      .title-block {
        display: flex;
        flex-direction: row;
        align-items: center;

        .title {
          font-size: 18px;
          display: flex;
          flex-direction: row;
          align-items: center;
          font-weight: bold;
          flex-grow: 1;
        }

        .setting {
          font-size: 14px;
          color: $orange;
          flex-grow: 0;
          cursor: pointer;
        }
      }

      .privacy-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 14px;
        margin-top: 16px;

        .info-label {
          flex-grow: 1;
        }

        .info-value {
          flex-grow: 0;
          color: $darkGray;
        }
      }
    }
  }
}
</style>
